<!-- 库存管理-物料管理-计量单位 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="management-content">
    <UnitType class="leftList" ref="singleRef"></UnitType>
    <UnitTable class="mainLeft" ref="multiRef"></UnitTable>
    <!-- <a-tabs :default-active-key="1">
      <a-tab-pane :key="1" title="单计量">
        
      </a-tab-pane>
      <a-tab-pane :key="2" title="多计量">
        
      </a-tab-pane>
    </a-tabs> -->
  </div>
  <!-- <unitAdd
    @unitEmit="unitEmit"
    v-model:visible="modalVisible"
    type="add"
  ></unitAdd> -->
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { PostUnit } from '@/api/inventory-management/material-management';
  import UnitType from './single/index.vue';
  import UnitTable from './multi/index.vue';
  import unitAdd from './components/unit-add/index.vue';

  const title: string = '计量单位';
  const breadCrumb: string[] = ['库存管理', '物料管理', '计量单位'];
  let modalVisible = ref(false); // 是否显示新增弹框
  let singleRef = ref(); // 单计量组件ref
  let multiRef = ref(); // 多计量组件ref
  // 新增弹出框
  const add = () => {
    modalVisible.value = true;
  };

  // 弹出框自定义事件
  const unitEmit = async (form: any) => {
    try {
      await PostUnit(form);
      if (form.type === 1) singleRef.value.refresh();
      else multiRef.value.refresh();
    } catch (error: unknown) {
      console.log(error);
    }
  };
</script>

<style scoped lang="less">
  // :deep(.arco-tabs-content) {
  //   padding-top: 0px;
  // }
  .management-content {
    padding: 10px 10px 10px 20px;
    display: flex;
    height: 600px;
    .leftList {
      margin-right: 20px;
    }
    .mainLeft {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: auto;
    }
  }
</style>
